<template>
    <div class="customer-service">
      <h1>客户服务中心</h1>
  
      <!-- 联系信息部分 -->
      <section class="contact-info">
        <h2>联系信息</h2>
        <p><strong>客服电话：</strong> 400-123-4567</p>
        <p><strong>电子邮件：</strong> service@example.com</p>
        <p><strong>工作时间：</strong> 周一至周五，9:00 - 18:00（节假日除外）</p>
      </section>
  
      <!-- 常见问题部分 -->
      <section class="faq">
        <h2>常见问题</h2>
        <div v-for="(question, index) in faqList" :key="index" class="faq-item">
          <h3>{{ question.title }}</h3>
          <p>{{ question.answer }}</p>
        </div>
      </section>
  
      <!-- 客服人员部分 -->
      <section class="customer-support">
        <h2>客服人员联系方式</h2>
        <ul>
          <li>客服人员 A：Alice - alice@example.com</li>
          <li>客服人员 B：Bob - bob@example.com</li>
          <li>客服人员 C：Carol - carol@example.com</li>
        </ul>
      </section>
    </div>
  </template>
  
  <script setup>
  const faqList = [
    { title: '如何注册账号？', answer: '请访问我们的注册页面，填写必要信息完成注册。' },
    { title: '如何找回密码？', answer: '您可以通过忘记密码链接进行密码重置操作。' },
    { title: '退款流程是什么？', answer: '请查看我们的退款政策页面获取详细信息。' },
  ];
  
  </script>
  
  <style scoped>
  .customer-service {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
  }
  
  .contact-info, .faq, .customer-support {
    margin-bottom: 30px;
  }
  
  h1, h2, h3 {
    color: #333;
  }
  
  ul {
    list-style-type: none;
    padding: 0;
  }
  
  .faq-item {
    margin-bottom: 10px;
  }
  </style>
  